<template>
  <div class="add-conf">
    <vx-title-bar :list="['添加角色录入', '添加角色确认', '添加角色结果']" current="2" />
    <ui-form :model="form" class="vx-form" label-width="150px" label-position="right">
      <ui-form-item label="角色名称"> {{ form.name }}</ui-form-item>
      <ui-form-item label="菜单权限">
        <ui-tree
          ref="tree"
          :data="menulist"
          default-expand-all
          show-checkbox
          check-on-click-node
          node-key="id"
          :default-checked-keys="checkedKeys"
          :props="defaultProps"
          check-strictly
        >
        </ui-tree>
      </ui-form-item>
      <ui-form-item label=" ">
        <ui-button class="default-btn" @click="$router.go(-1)">返回</ui-button>
        <ui-button :loading="isBtnLoading" class="primary-long-btn" @click="confirmTrue">确认</ui-button>
      </ui-form-item>
    </ui-form>
  </div>
</template>

<script>
import roleApi from '@/api/role.js'; // 混入/分页
export default {
  name: 'role-detail-index',
  data() {
    return {
      isBtnLoading: false,
      menulist: this.getData().menulist,
      form: this.getData().form,
      checkedKeys: this.getData().checkedKeys, //已授权的菜单列表
      defaultProps: {
        //树形组件绑定的属性
        children: 'children',
        label: 'name',
        disabled: this.disabledFn,
      },
    };
  },
  methods: {
    disabledFn() {
      return true;
    },
    async confirmTrue() {
      try {
        this.isBtnLoading = true;
        const params = {
          name: this.form.name,
          menuIds: this.getData().menuIds,
        };
        const res = await roleApi.roleAdd(params);
        this.setData({
          form: this.form.name,
          res: res,
        });
        this.$router.push({
          path: '/system/role/add/add-res',
        });
      } finally {
        this.isBtnLoading = false;
      }
    },
  },
};
</script>
